site_8g/src/app/[locale]/(ordinary)/profile/component/ModalCom/index.tsx

"use client";
import { FC, MouseEventHandler, PropsWithChildren, } from "react";
import {Modal, ModalContent, ModalBody, ModalFooter, useDisclosure} from "@nextui-org/react";
import "./style.scss";
import { useGlobalStore } from '@/stores';
import { useRouter } from "@/i18n";
import {getLogoutApi} from "@/api/user";
import { useTranslations } from "next-intl";

/**
 * @description 底部组件
 */
export interface ItemComProps {
    type?: string;
    callbackFun?: (params: any) => void;
}

const ModalCom: FC<PropsWithChildren<ItemComProps>> = () => {
    const t = useTranslations("ProfilePage");
    const { token, setToken, setUserInfo } = useGlobalStore();
    const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();

    const logoutRequest = async () => {
        let res = await getLogoutApi()
        if(res.code == 200) {
            onClose()
            setUserInfo('')
            setToken('')
            router.replace('/login')
        }
    }

    const router = useRouter();
    const goPage = (path = '/') => {
        router.push(path)
    }

    return (
        <>
            {/* {
                token ? <span className="logOut" onClick={onOpen}>{t('Sair')}</span> : (
                    <span className="logOut" onClick={() => goPage('/login')}>{t('Login')}</span>
                )
            } */}

            {
                <span className="logOut" onClick={onOpen}>{t('Sair')}</span>
            }
            <Modal 
                backdrop="opaque" 
                isOpen={isOpen} 
                size="5xl"
                placement={'center'}
                onOpenChange={onOpenChange}
                hideCloseButton={true}
                classNames={{
                    body: "body1-box",
                    footer: "footer1-box",
                }}
            >
                <ModalContent>
                {(onClose: MouseEventHandler<HTMLSpanElement> | undefined) => (
                    <>
                    <ModalBody>
                        <p className="modal-p-box">{t('Deseja')}</p>
                    </ModalBody>
                    <ModalFooter>
                        <span className="modal-span-box" onClick={onClose}>
                            {t('Cancelar')}
                        </span>
                        <span className="modal-span-box active" onClick={logoutRequest}>
                            {t('Continuar')}
                        </span>
                    </ModalFooter>
                    </>
                )}
                </ModalContent>
            </Modal>
        </>
    );
};

export default ModalCom;